<template>
  <div>
    <span>主类目：</span>
    <select v-model="rci">
      <option value="0">全部</option>
      <option v-for="i in rootCategory" :value="i.id">{{i.name}}</option>
    </select>
    <button class="screen-btn" @click="screenCategory">筛选</button>

    <input type="text" class="search-username-text"
           placeholder="可输入商家的用户名"
           v-model="gcu"
           oninput="value=value.replace(/[^\d]/g,'')">

    <input type="text" class="search-info-text"
           v-model="nd"
           placeholder="可输入商品类目的名字、描述...">

    <button class="search-btn" @click="searchCategory">搜索</button>

    <button class="add-btn root-category" @click="addCategoryClick">添加类目</button>
  </div>
</template>

<script>
  export default {
    name: "Neck",
    props: {
      rootCategory: { // 获取全部的root类目
        type: Array,
        default() {
          return []
        }
      },
      root_category_id: { // 获取筛选的root类目
        type: Number,
        default: 0,
      },
      goods_category_username: { // 获取搜索框商品类目用户名的内容
        type: String,
        default: '',
      },
      name_describe: { // 商品类目搜索框内的内容
        type: String,
        default: ''
      }
    },
    data() {
      return {
        rci: this.root_category_id, // 准备选择哪个select框
        gcu: this.goods_category_username, // 准备渲染到搜索商品类目的用户名框上
        nd: this.name_describe, // 准备渲染到商品类目搜索框上

      }
    },
    methods: {
      screenCategory() { // 筛选商品类目
        this.$emit('screen', {
          rci: this.rci,
          gcu: this.gcu,
          nd: this.nd
        })
      },
      searchCategory() { // 搜索商品类目
        this.$emit('search', {
          rci: this.rci,
          gcu: this.gcu,
          nd: this.nd
        })
      },
      addCategoryClick() {
        this.$router.push({name: 'AdminToCategoryAdd', params: {rootCategory: this.rootCategory}})/******坑！！！,要直接传props数据,不要把props转为data传**************/
      }
    }
  }
</script>

<style scoped>
  div {
    position: relative;
    /*background-color: yellow;*/
  }
  div select {
    width: 120px;
    height: 30px;
    margin-right: 10px;

    border-radius: 4px;
    border: 1px solid #cdcdcd;
    background-color: #fff;
  }
  div .screen-btn {
    height: 30px;
    width: 60px;
    color: white;
    border-radius: 4px;

    outline: none;
    border: none;
    background-color: rgb(23, 162, 184);/*007bff*/
  }
  div .screen-btn:hover {
    cursor: pointer;
    opacity: 0.75;
  }

  div .search-username-text {
    /*position: absolute;*/

    width: 200px;
    height: 28px;
    transform: translateX(40px);
  }
  div .search-info-text {
    width: 200px;
    height: 28px;
    transform: translateX(60px);
  }
  div .search-btn {
    height: 32px;
    width: 100px;
    color: white;
    border-radius: 4px;
    background-color: rgb(23, 162, 184);/*007bff*/
    transform: translateX(70px);

    outline: none;
    border: none;
  }
  div .search-btn:hover {
    cursor: pointer;
    opacity: 0.75;
  }
  div .add-btn {
    position: absolute;

    margin-top: 15px;

    height: 30px;
    width: 90px;
    color: white;
    border-radius: 4px;
    /*background-color: #28a745;*/

    outline: none;
    border: none;
  }
  div .add-btn:hover {
    cursor: pointer;
    opacity: 0.75;
  }
  div .root-category {
    right: 0;
    background-color: #ff5600;
  }
  div .goods-category {
    right: 160px;
    background-color: #28a745;
  }
</style>